<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .chart {
      width: 100vw;
      height: 100vh;
      /* background-color: darkblue; */
    }
  </style>
</head>
<body>
  <div class="chart">

  </div>
  <script src="./echarts.js"></script>
  <!-- <script src="../data.js"></script> -->
  <!-- <script src="./data-err.js"></script> -->
  <!-- <script src="./data-single.js"></script> -->
  <script src="./data-triple.js"></script>
  <script>
    // console.log(echarts)
    // 初始化echarts实例
    const instance = echarts.init(document.querySelector('.chart'))

   // 指定图表的配置项和数据

    //  const option = {
    //   xAxis: {
    //     type: 'category',
    //     boundaryGap: false,
    //     data: data.map(d => d.name)
    //   },
    //   yAxis: {
    //     type: 'value',
    //     splitLine: {
    //        lineStyle: {
    //          type: "dashed"
    //        }
    //      },
    //   },
    //     areaStyle: {
    //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //       {
    //         offset: 0,
    //         color: '#9ac3f4'
    //       },
    //       {
    //         offset: 1,
    //         color: '#f1f9ff'
    //       }
    //     ])
    //   },
    //   series: [
    //     {
    //       type: 'line',
    //       symbol: 'circle',
    //       symbolSize: 10,
    //       itemStyle: {
    //         color: '#0770FF'
    //       },
    //       data: data.map(d => d.value),
    //       type: 'line',
    //       areaStyle: {}
    //     }
    //   ]
    // }
    // const option = {
    //     xAxis: {
    //       type: 'category',
    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisLabel: {
    //         color:'red'
    //       }
    //     },
    //     series: [
    //       {
    //         data: data.map(d => d.value),
    //         type: 'bar',
    //         showBackground: true,
    //         backgroundStyle: {
    //           color: 'rgba(200, 200, 220, .3)'
    //         },
    //         itemStyle: {
    //           borderRadius:8,
    //           ShadowBlur:16,
    //           ShadowColor: '#aaa',
    //         },
    //       }
    //     ]
    // }
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(d=>d.name)
        },
        yAxis: {
          type: 'value',
          splitLine: {
           lineStyle: {
             type: "dashed"
           }
         },
        },
        series: [
          {
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: '#0770FF'
            },
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: data.map(d=>d.prev)
          },
          {
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: '#ffb543'
            },
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: data.map(d=>d.current)
          },
          {
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: '#00c1c8'
            },
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: data.map(d=>d.next)
          }
        ]
      };
    // 使用刚指定的配置项
    instance.setOption(option)
  </script>
</body>
</html>
